import React, { useState, useEffect, useRef } from "react";
import { Drawer, Select, Input, Button, message } from "antd";
import { SQUARE_TYPE, VIP_DEGREE } from "@/utils/constant";
import UploadWall from '@/components/Upload/UploadWall'
import UploadVideo from '@/components/Upload/UploadVideo'
import { squarePublish } from '@/api/square'
const { TextArea } = Input;

const Addworks = (props) => {
  const { onCancel, onAddOk } = props;
  const uploadWall = useRef(null)
  const uploadVideo = useRef(null)
  const [visible, setVisisble] = useState(props.visible);
  const [workType, setworkType] = useState(props.workType);
  const [cateId, setcateId] = useState('');
  const [price, setprice] = useState('');
  const [level, setLevel] = useState('');
  const [list, setlist] = useState(props.list || []); // 作品文件列表
  const [textContent, settextContent] = useState(props.textContent);
  const [addLoading, setaddLoading] = useState(false);


  useEffect(() => {
    setworkType(props.workType);
  }, [props.workType]);

  useEffect(() => {
    setlist(props.list);
  }, [props.list]);

  useEffect(() => {
    setVisisble(props.visible);
  }, [props.visible]);

  const hadnleTypeChange = value => {
    setworkType(value)
  };
  const hadnleLevelChange = value => {
    setLevel(value)
  };
  const hadnleSquareChange = value => {
    setcateId(value)
  };
  const handlePriceChange = e => {
    setprice(e.target.value)
  };

  // 取消，关闭抽屉 重置表单
  const handleCancel = () => {
    onCancel && onCancel();
    setlist([])
    setworkType(1)
    setLevel('')
    setcateId('')
    setprice('')
    settextContent('')
    uploadVideo && uploadVideo.current && uploadVideo.current.clear();
    uploadWall && uploadWall.current && uploadWall.current.clear();
  };
  const { Option } = Select;

  const handleFileChange = imgList => {
    setlist(imgList);
  };
  const handleTextChange = e => {
    settextContent(e.target.value);
  };

  const Publisher = () => {
    if (workType === 1) {
      return <UploadWall onFileChange={handleFileChange}  ref={uploadWall} />;
    } else if (workType === 2) {
      return <UploadVideo onFileChange={handleFileChange} ref={uploadVideo}/>;
    } else {
      return null;
    }

  };

  const handleSubmit = () => {
    setaddLoading(true);
    squarePublish({
      cateId, // 广场分类ID
      textContent, // 作品文字描述
      type: workType, // 0-纯文字 1-图片 2-视频
      price, // 价格，免费则为0
      level, // vip几等级允许观看，无限制则为0
      url: list, // 资源url数组
    }).then(res => {
      message.success('添加成功');
      onAddOk && onAddOk();
    }).catch(e => {
      message.error('添加失败');
    }).finally(() => {
      setaddLoading(false);
    })
  };

  const footer = <Button type="primary" loading={addLoading} onClick={handleSubmit}> 提交 </Button>

  return (
    <Drawer
      title="发布作品"
      visible={visible}
      width={720}
      maskClosable={false}
      placement="right"
      getContainer={false}
      footer={footer}
      onClose={handleCancel}
    >
      <>
        <h5 className="mb10 ">选择作品类型：</h5>
        <Select  onChange={hadnleTypeChange} style={{ width: '100%' }} value={workType}>
          <Option value={1}>{SQUARE_TYPE[1]}</Option>
          <Option value={2}>{SQUARE_TYPE[2]}</Option>
          <Option value={0}>{SQUARE_TYPE[0]}</Option>
        </Select>
        <h5 className="mb10 mt20">选择广场分类：</h5>
        <Select onChange={hadnleSquareChange} style={{ width: '100%' }} value={cateId}>
          {
            props.squareList.map(v => {
              return <Option key={v.id} value={v.id}>{v.name}</Option>
            })
          }
        </Select>
        <h5 className="mb10 mt20">选择VIP等级：</h5>
        <Select onChange={hadnleLevelChange} style={{ width: '100%' }} value={level}>
          <Option value={0}>{VIP_DEGREE[0]}</Option>
          <Option value={1}>{VIP_DEGREE[1]}</Option>
          <Option value={2}>{VIP_DEGREE[2]}</Option>
        </Select>
        <h5 className="mb10 mt20">设置作品价格：</h5>
        <Input prefix="￥" suffix="RMB" onChange={handlePriceChange} type='number' value={price}/>
        <h5 className="mb10 mt20">作品描述：</h5>
        <TextArea placeholder="请输入作品描述" onChange={handleTextChange} allowClear  value={textContent}/>
        <div style={{ paddingTop: 20 }}>
          {Publisher()}
        </div>
      </>
    </Drawer>
  );
};

export default Addworks;
